<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head th:replace="public/head :: head(标签)"></head>
<body class="">
<div class="page">
    <div class="flex-fill">
        <div th:replace="public/menu :: menu(3)"></div>
        <div class="my-3 my-md-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <h3 class="mb-4"><p class="lh-1">标签</p></h3>
                        <div>
                            <div class="list-group list-group-transparent mb-0">
                                <a href="#"
                                   class="list-group-item list-group-item-action d-flex align-items-center active"
                                   th:href="@{/admin/tag/list}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                                 height="24" viewBox="0 0 24 24" fill="none"
                                                                 stroke="currentColor" stroke-width="2"
                                                                 stroke-linecap="round" stroke-linejoin="round"
                                                                 class="icon"><path
                                            d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line
                                            x1="7" y1="7" x2="7.01" y2="7"></line></svg>
                                    </span>所有标签
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-body">
                                <div class="alert alert-success col-login float-right" style="position:absolute;zIndex:-1;right: 50px;display: none" role="alert"  id="alert-success">
                                    操作成功
                                </div>
                                <div class="alert alert-error col-login float-right" style="position:absolute;zIndex:-1;right: 50px;display: none" role="alert"  id="alert-fail">
                                    操作失败，请稍后重试
                                    <a href="#" class="close" data-dismiss="alert" aria-label="close"></a>
                                </div>
                                <div class="table-responsive">
                                    <table class="table card-table table-hover text-nowrap">
                                        <thead>
                                        <tr>
                                            <th class="w-1">ID</th>
                                            <th>标题</th>
                                            <th>创建时间</th>
                                            <th>文章数</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="tag : ${page.list}">
                                            <td>
                                                <span class="text-muted" th:text="${tag.id}">001401</span>
                                            </td>
                                            <td>
                                                <a href="javascript:void(0)" class="text-inherit" th:text="${tag.name}">设计模式</a>
                                            </td>
                                            <td>
                                                <span class="tag tag-warning"
                                                      th:text="${#dates.format(tag.createTime, 'yyyy-MM-dd')}">2020-02-29</span>
                                            </td>
                                            <td th:text="${tag.articleNum}">20</td>
                                            <td>
                                                <a href="#" onclick="deleteModal(this)" th:attr="tagId=${tag.id}">删除</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="card-body" th:if="${page.totalPage > 0}">
                                <span>
                                    共<b class="text-red">&nbsp;[[${page.totalNum}]]&nbsp;</b>
                                    个标签，共<b class="text-red">&nbsp;[[${page.totalPage}]]&nbsp;</b>
                                    页，当前第<b class="text-red">&nbsp;[[${page.page}]]&nbsp;</b>页</span>
                                <ul class="pagination center float-right">
                                    <li class="page-item" th:classappend="${page.totalPage == 0 || page.page == 1} ? 'disabled' : ''">
                                        <a class="page-link" href="#" tabindex="-1" th:href="'/admin/tag/list?page=' + ${page.page - 1}">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z"></path>
                                                <polyline points="15 6 9 12 15 18"></polyline>
                                            </svg>
                                        </a>
                                    </li>
                                    <li class="page-item" th:classappend="${page.totalPage == 0 || page.page == page.totalPage} ? 'disabled' : ''">
                                        <a class="page-link" href="#" th:href="'/admin/tag/list?page=' + ${page.page + 1}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                 stroke-linecap="round" stroke-linejoin="round" class="icon">
                                                <polyline points="9 18 15 12 9 6"></polyline>
                                            </svg>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal modal-blur fade" id="deleteModal" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h4 class="modal-title bold">确认删除？</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link link-secondary mr-auto" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="deleteTag()">删除</button>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="admin/dashboard :: footer"></div>
</div>
<script>
    let currentColumnId = "";
    let currentColumnName = "";
    function editItem(ele) {
        currentColumnId = $(ele).attr("columnId");
        currentColumnName = $(ele).attr("columnName");
        $.ajax({
            type: "get",
            url: "/admin/column/item/list",
            data: {"columnId": currentColumnId},
            success: function (data) {
                console.log(data);
                if (data.code == 200) {
                    $("#columnItem").html(data);
                }
                $("#modal-report").modal('show');
            },
            error: function (data) {
            }
        })
    }

    //被删除的tagId
    let deleteItemId = "";
    function deleteModal(ele) {
        deleteItemId = $(ele).attr("tagId");
        $("#deleteModal").modal('show');
    }
    function deleteTag() {
        $.ajax({
            type: "post",
            url: "/admin/tag/" + deleteItemId,
            success: function (data) {
                if (data.code == 200) {
                    $("#alert-success").fadeIn();
                    setTimeout(function () {
                        $("#alert-success").fadeOut();
                        window.location.reload();
                    }, 1000);
                } else {
                    $("#alert-fail").fadeIn();
                    setTimeout(function () {
                        $("#alert-fail").fadeOut();
                    }, 800);
                }
            },
            error: function (data) {
                $("#alert-fail").fadeIn();
            }
        })
    }
</script>
</body>
</html>